
<template>
  《Vue3》第17节：Vue3项目实现点击图标进入全屏显示的功能

  <div class="v-full-screen" @click="toggleFullScreen">
    <font-awesome-icon v-if="isFullscreen" icon="fas fa-compress" size="lg"/>
    <font-awesome-icon v-else icon="fas fa-expand" size="lg"/>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from'vue';
import screenfull from'screenfull';

const isFullscreen = ref(false);

const change = () => {
  isFullscreen.value = screenfull.isFullscreen;
};

const toggleFullScreen = () => {
  screenfull.toggle();
};

onMounted(() => {
  screenfull.on('change', change);
});

onUnmounted(() => {
  screenfull.off('change', change);
});
</script>


<style scoped>
.v-full-screen {
  cursor: pointer;
}
</style>